.dots-pattern {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100svh;
  background: linear-gradient(177deg, rgba(255, 137, 131, 0.5) 0%, rgba(35, 136, 224, 0.05) 60%);
  clip-path: polygon(0 0, 100% 0, 100% 54%, 0% 100%);
}

.dots-pattern::after {
  content: "";
  position: absolute;
  background-image: radial-gradient(rgba(0, 0, 0, 0) 1.5px, var(--background-kener) 1px);
  background-size: 14px 14px;
  width: 100%;
  height: 100vh;
  top: 0;
  transform: blur(3px);
  left: 0;
}

.squares-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100svh;

  /* clip-path: polygon(0 0, 100% 0, 100% 54%, 0% 100%); */
}

.squares-pattern::after {
  content: "";
  position: absolute;
  background-image:
    linear-gradient(#444cf7 1px, transparent 1px),
    linear-gradient(to right, #444cf7 1px, var(--background-kener) 1px);
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.8) 20%,
    rgba(0, 0, 0, 0.6) 40%,
    rgba(0, 0, 0, 0.4) 60%,
    rgba(0, 0, 0, 0.2) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.1) 20%,
    rgba(0, 0, 0, 0.05) 40%,
    rgba(0, 0, 0, 0.025) 60%,
    rgba(0, 0, 0, 0.0125) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  background-size: 32px 32px;
  width: 100%;
  height: 100vh;
  top: 0;

  left: 0;
}
.dark .squares-pattern::after {
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.25) 20%,
    rgba(0, 0, 0, 0.125) 40%,
    rgba(0, 0, 0, 0.0625) 60%,
    rgba(0, 0, 0, 0.03125) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.25) 20%,
    rgba(0, 0, 0, 0.125) 40%,
    rgba(0, 0, 0, 0.0625) 60%,
    rgba(0, 0, 0, 0.03125) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  background-image:
    linear-gradient(#616fbf 1px, transparent 1px),
    linear-gradient(to right, #616fbf 1px, var(--background-kener) 1px);
}

.radial-blue-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100svh;
  background-image: radial-gradient(
    circle at top right,
    rgb(49, 157, 235) 0%,
    rgb(49, 157, 235) 13%,
    rgb(76, 166, 234) 13%,
    rgb(76, 166, 234) 23%,
    rgb(103, 176, 232) 23%,
    rgb(103, 176, 232) 33%,
    rgb(130, 185, 231) 33%,
    rgb(130, 185, 231) 46%,
    rgb(156, 194, 230) 46%,
    rgb(156, 194, 230) 48%,
    rgb(183, 203, 229) 48%,
    rgb(183, 203, 229) 63%,
    rgb(210, 213, 227) 63%,
    rgb(210, 213, 227) 83%,
    rgb(237, 222, 226) 83%,
    rgb(237, 222, 226) 100%
  );
}
.dark .radial-blue-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100svh;
  background-image: radial-gradient(
    circle at bottom right,
    rgb(42, 23, 131) 0%,
    rgb(42, 23, 131) 20%,
    rgb(42, 40, 158) 20%,
    rgb(42, 40, 158) 40%,
    rgb(29, 41, 133) 40%,
    rgb(21, 34, 134) 60%,
    rgb(29, 52, 145) 60%,
    rgb(24, 47, 141) 80%,
    rgb(25, 54, 140) 80%,
    rgb(26, 58, 154) 100%
  );
}
.radial-mono-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100svh;
  background-image: radial-gradient(
    circle at top left,
    rgb(195, 195, 195) 0%,
    rgb(195, 195, 195) 2%,
    rgb(202, 202, 202) 2%,
    rgb(202, 202, 202) 23%,
    rgb(209, 209, 209) 23%,
    rgb(209, 209, 209) 55%,
    rgb(217, 217, 217) 55%,
    rgb(217, 217, 217) 80%,
    rgb(224, 224, 224) 80%,
    rgb(224, 224, 224) 86%,
    rgb(231, 231, 231) 86%,
    rgb(231, 231, 231) 96%,
    rgb(238, 238, 238) 96%,
    rgb(238, 238, 238) 100%
  );
}
.dark .radial-mono-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100svh;
  background-image: radial-gradient(
    circle at top left,
    rgb(48, 48, 48) 0%,
    rgb(48, 48, 48) 8%,
    rgb(46, 46, 46) 8%,
    rgb(46, 46, 46) 57%,
    rgb(43, 43, 43) 57%,
    rgb(43, 43, 43) 65%,
    rgb(41, 41, 41) 65%,
    rgb(41, 41, 41) 67%,
    rgb(39, 39, 39) 67%,
    rgb(39, 39, 39) 72%,
    rgb(36, 36, 36) 72%,
    rgb(36, 36, 36) 80%,
    rgb(34, 34, 34) 80%,
    rgb(34, 34, 34) 100%
  );
}
.radial-midnight-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100svh;
  background-image:
    radial-gradient(
      circle at 11% 62%,
      rgba(205, 205, 205, 0.04) 0%,
      rgba(205, 205, 205, 0.04) 50%,
      rgba(149, 149, 149, 0.04) 50%,
      rgba(149, 149, 149, 0.04) 100%
    ),
    radial-gradient(
      circle at 78% 10%,
      rgba(49, 49, 49, 0.04) 0%,
      rgba(49, 49, 49, 0.04) 50%,
      rgba(254, 254, 254, 0.04) 50%,
      rgba(254, 254, 254, 0.04) 100%
    ),
    radial-gradient(
      circle at 92% 43%,
      rgba(34, 34, 34, 0.04) 0%,
      rgba(34, 34, 34, 0.04) 50%,
      rgba(206, 206, 206, 0.04) 50%,
      rgba(206, 206, 206, 0.04) 100%
    ),
    linear-gradient(329deg, rgb(241, 77, 33), rgb(218, 227, 61));
}
.dark .radial-midnight-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100svh;
  background-image:
    radial-gradient(
      circle at 90% 24%,
      rgba(209, 209, 209, 0.04) 0%,
      rgba(209, 209, 209, 0.04) 50%,
      rgba(160, 160, 160, 0.04) 50%,
      rgba(160, 160, 160, 0.04) 100%
    ),
    radial-gradient(
      circle at 91% 63%,
      rgba(45, 45, 45, 0.04) 0%,
      rgba(45, 45, 45, 0.04) 50%,
      rgba(87, 87, 87, 0.04) 50%,
      rgba(87, 87, 87, 0.04) 100%
    ),
    radial-gradient(
      circle at 17% 2%,
      rgba(124, 124, 124, 0.04) 0%,
      rgba(124, 124, 124, 0.04) 50%,
      rgba(117, 117, 117, 0.04) 50%,
      rgba(117, 117, 117, 0.04) 100%
    ),
    linear-gradient(88deg, rgb(33, 20, 105), rgb(1, 15, 13));
}
.circle-mono-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100svh;
  background-image: radial-gradient(
    circle at center center,
    rgb(252, 252, 252),
    rgb(129, 129, 129)
  );
}
.dark .circle-mono-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100svh;
  background-image: radial-gradient(circle at center center, rgb(71, 71, 71), rgb(8, 8, 8));
}
.carbon-fibre-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100svh;
  background-image:
    radial-gradient(circle at center center, transparent, rgb(255, 255, 255)),
    repeating-linear-gradient(
      135deg,
      rgb(255, 255, 255) 0px,
      rgb(255, 255, 255) 12px,
      transparent 12px,
      transparent 19px,
      rgb(255, 255, 255) 19px,
      rgb(255, 255, 255) 24px,
      transparent 24px,
      transparent 28px
    ),
    repeating-linear-gradient(
      45deg,
      rgb(245, 245, 245) 0px,
      rgb(245, 245, 245) 7px,
      transparent 7px,
      transparent 14px
    ),
    linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
}
.dark .carbon-fibre-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100svh;
  background-image:
    radial-gradient(circle at center center, rgba(33, 33, 33, 0), rgb(33, 33, 33)),
    repeating-linear-gradient(
      135deg,
      rgb(33, 33, 33) 0px,
      rgb(33, 33, 33) 1px,
      transparent 1px,
      transparent 4px
    ),
    repeating-linear-gradient(
      45deg,
      rgb(56, 56, 56) 0px,
      rgb(56, 56, 56) 5px,
      transparent 5px,
      transparent 6px
    ),
    linear-gradient(90deg, rgb(33, 33, 33), rgb(33, 33, 33));
}
.texture-sky-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100svh;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.04),
      rgba(0, 0, 0, 0.08),
      rgba(0, 0, 0, 0.05),
      rgba(0, 0, 0, 0.04),
      rgba(0, 0, 0, 0.01),
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.09),
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.03),
      transparent,
      rgba(0, 0, 0, 0.07),
      rgba(0, 0, 0, 0.03),
      rgba(0, 0, 0, 0.06) 4px
    ),
    linear-gradient(90deg, rgb(193, 255, 253), rgb(59, 104, 247));
}
.dark .texture-sky-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100svh;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.08),
      rgba(0, 0, 0, 0.01),
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.05),
      rgba(0, 0, 0, 0.08),
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.04),
      rgba(0, 0, 0, 0.02),
      rgba(0, 0, 0, 0.02),
      rgba(0, 0, 0, 0.09),
      rgba(0, 0, 0, 0.04),
      rgba(0, 0, 0, 0.06),
      rgba(0, 0, 0, 0.01) 3px
    ),
    linear-gradient(0deg, rgb(28, 117, 231), rgb(72, 64, 87));
}
.tiles-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100svh;
  background-image:
    linear-gradient(45deg, rgb(255, 255, 255) 0%, transparent 36%),
    repeating-linear-gradient(
      135deg,
      rgba(197, 197, 197, 0.1) 0px,
      rgba(197, 197, 197, 0.1) 1px,
      transparent 1px,
      transparent 11px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(197, 197, 197, 0.1) 0px,
      rgba(197, 197, 197, 0.1) 1px,
      transparent 1px,
      transparent 11px
    ),
    linear-gradient(0deg, rgb(255, 255, 255), rgb(255, 255, 255));
}
.dark .tiles-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100svh;
  background-image:
    linear-gradient(90deg, rgb(33, 33, 33) 0%, transparent 59%),
    repeating-linear-gradient(
      45deg,
      rgba(168, 168, 168, 0.1) 0px,
      rgba(168, 168, 168, 0.1) 1px,
      transparent 1px,
      transparent 13px
    ),
    repeating-linear-gradient(
      135deg,
      rgba(168, 168, 168, 0.1) 0px,
      rgba(168, 168, 168, 0.1) 1px,
      transparent 1px,
      transparent 13px
    ),
    linear-gradient(90deg, rgb(33, 33, 33), rgb(33, 33, 33));
}
.angular-mono-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100svh;
  background-image:
    linear-gradient(
      67.5deg,
      rgb(215, 215, 215) 0%,
      rgb(215, 215, 215) 46%,
      rgb(198, 198, 198) 46%,
      rgb(198, 198, 198) 49%,
      rgb(181, 181, 181) 49%,
      rgb(181, 181, 181) 56%,
      rgb(164, 164, 164) 56%,
      rgb(164, 164, 164) 61%,
      rgb(146, 146, 146) 61%,
      rgb(146, 146, 146) 75%,
      rgb(129, 129, 129) 75%,
      rgb(129, 129, 129) 84%,
      rgb(112, 112, 112) 84%,
      rgb(112, 112, 112) 100%
    ),
    linear-gradient(
      22.5deg,
      rgb(215, 215, 215) 0%,
      rgb(215, 215, 215) 46%,
      rgb(198, 198, 198) 46%,
      rgb(198, 198, 198) 49%,
      rgb(181, 181, 181) 49%,
      rgb(181, 181, 181) 56%,
      rgb(164, 164, 164) 56%,
      rgb(164, 164, 164) 61%,
      rgb(146, 146, 146) 61%,
      rgb(146, 146, 146) 75%,
      rgb(129, 129, 129) 75%,
      rgb(129, 129, 129) 84%,
      rgb(112, 112, 112) 84%,
      rgb(112, 112, 112) 100%
    ),
    linear-gradient(
      112.5deg,
      rgb(215, 215, 215) 0%,
      rgb(215, 215, 215) 46%,
      rgb(198, 198, 198) 46%,
      rgb(198, 198, 198) 49%,
      rgb(181, 181, 181) 49%,
      rgb(181, 181, 181) 56%,
      rgb(164, 164, 164) 56%,
      rgb(164, 164, 164) 61%,
      rgb(146, 146, 146) 61%,
      rgb(146, 146, 146) 75%,
      rgb(129, 129, 129) 75%,
      rgb(129, 129, 129) 84%,
      rgb(112, 112, 112) 84%,
      rgb(112, 112, 112) 100%
    ),
    linear-gradient(90deg, rgb(231, 231, 231), rgb(195, 195, 195));
  background-blend-mode: overlay, overlay, overlay, normal;
}
.dark .angular-mono-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100svh;
  background-image:
    linear-gradient(
      45deg,
      rgb(46, 46, 46) 0%,
      rgb(46, 46, 46) 22%,
      rgb(81, 81, 81) 22%,
      rgb(81, 81, 81) 75%,
      rgb(115, 115, 115) 75%,
      rgb(115, 115, 115) 77%,
      rgb(150, 150, 150) 77%,
      rgb(150, 150, 150) 82%,
      rgb(184, 184, 184) 82%,
      rgb(184, 184, 184) 93%,
      rgb(219, 219, 219) 93%,
      rgb(219, 219, 219) 98%,
      rgb(253, 253, 253) 98%,
      rgb(253, 253, 253) 100%
    ),
    linear-gradient(
      135deg,
      rgb(46, 46, 46) 0%,
      rgb(46, 46, 46) 22%,
      rgb(81, 81, 81) 22%,
      rgb(81, 81, 81) 75%,
      rgb(115, 115, 115) 75%,
      rgb(115, 115, 115) 77%,
      rgb(150, 150, 150) 77%,
      rgb(150, 150, 150) 82%,
      rgb(184, 184, 184) 82%,
      rgb(184, 184, 184) 93%,
      rgb(219, 219, 219) 93%,
      rgb(219, 219, 219) 98%,
      rgb(253, 253, 253) 98%,
      rgb(253, 253, 253) 100%
    ),
    linear-gradient(
      22.5deg,
      rgb(46, 46, 46) 0%,
      rgb(46, 46, 46) 22%,
      rgb(81, 81, 81) 22%,
      rgb(81, 81, 81) 75%,
      rgb(115, 115, 115) 75%,
      rgb(115, 115, 115) 77%,
      rgb(150, 150, 150) 77%,
      rgb(150, 150, 150) 82%,
      rgb(184, 184, 184) 82%,
      rgb(184, 184, 184) 93%,
      rgb(219, 219, 219) 93%,
      rgb(219, 219, 219) 98%,
      rgb(253, 253, 253) 98%,
      rgb(253, 253, 253) 100%
    ),
    linear-gradient(
      157.5deg,
      rgb(46, 46, 46) 0%,
      rgb(46, 46, 46) 22%,
      rgb(81, 81, 81) 22%,
      rgb(81, 81, 81) 75%,
      rgb(115, 115, 115) 75%,
      rgb(115, 115, 115) 77%,
      rgb(150, 150, 150) 77%,
      rgb(150, 150, 150) 82%,
      rgb(184, 184, 184) 82%,
      rgb(184, 184, 184) 93%,
      rgb(219, 219, 219) 93%,
      rgb(219, 219, 219) 98%,
      rgb(253, 253, 253) 98%,
      rgb(253, 253, 253) 100%
    ),
    linear-gradient(90deg, rgb(58, 58, 58), rgb(76, 76, 76));
  background-blend-mode: overlay, overlay, overlay, overlay, normal;
}
.angular-spring-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100svh;
  background-image:
    linear-gradient(90deg, rgb(188, 188, 188), rgb(172, 172, 172)),
    linear-gradient(
      45deg,
      rgb(164, 46, 188) 0%,
      rgb(164, 46, 188) 14%,
      rgb(165, 82, 189) 14%,
      rgb(165, 82, 189) 20%,
      rgb(165, 117, 190) 20%,
      rgb(165, 117, 190) 23%,
      rgb(166, 153, 191) 23%,
      rgb(166, 153, 191) 30%,
      rgb(166, 188, 192) 30%,
      rgb(166, 188, 192) 37%,
      rgb(167, 224, 193) 37%,
      rgb(167, 224, 193) 100%
    ),
    linear-gradient(
      135deg,
      rgb(164, 46, 188) 0%,
      rgb(164, 46, 188) 14%,
      rgb(165, 82, 189) 14%,
      rgb(165, 82, 189) 20%,
      rgb(165, 117, 190) 20%,
      rgb(165, 117, 190) 23%,
      rgb(166, 153, 191) 23%,
      rgb(166, 153, 191) 30%,
      rgb(166, 188, 192) 30%,
      rgb(166, 188, 192) 37%,
      rgb(167, 224, 193) 37%,
      rgb(167, 224, 193) 100%
    );
  background-blend-mode: overlay, overlay, normal;
}
.dark .angular-spring-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100svh;
  background-image:
    linear-gradient(0deg, rgb(59, 59, 59), rgb(197, 197, 197)),
    linear-gradient(
      45deg,
      rgb(159, 116, 214) 0%,
      rgb(159, 116, 214) 25%,
      rgb(130, 95, 173) 25%,
      rgb(130, 95, 173) 45%,
      rgb(101, 74, 132) 45%,
      rgb(101, 74, 132) 50%,
      rgb(72, 54, 90) 50%,
      rgb(72, 54, 90) 52%,
      rgb(43, 33, 49) 52%,
      rgb(43, 33, 49) 61%,
      rgb(14, 12, 8) 61%,
      rgb(14, 12, 8) 100%
    ),
    linear-gradient(
      135deg,
      rgb(159, 116, 214) 0%,
      rgb(159, 116, 214) 25%,
      rgb(130, 95, 173) 25%,
      rgb(130, 95, 173) 45%,
      rgb(101, 74, 132) 45%,
      rgb(101, 74, 132) 50%,
      rgb(72, 54, 90) 50%,
      rgb(72, 54, 90) 52%,
      rgb(43, 33, 49) 52%,
      rgb(43, 33, 49) 61%,
      rgb(14, 12, 8) 61%,
      rgb(14, 12, 8) 100%
    );
  background-blend-mode: overlay, overlay, normal;
}
.angular-bloom-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100svh;
  background-image:
    linear-gradient(
      157.5deg,
      rgb(95, 97, 179) 0%,
      rgb(95, 97, 179) 16%,
      rgb(115, 120, 184) 16%,
      rgb(115, 120, 184) 20%,
      rgb(135, 142, 188) 20%,
      rgb(135, 142, 188) 32%,
      rgb(155, 165, 193) 32%,
      rgb(155, 165, 193) 38%,
      rgb(175, 187, 198) 38%,
      rgb(175, 187, 198) 48%,
      rgb(195, 210, 203) 48%,
      rgb(195, 210, 203) 51%,
      rgb(215, 232, 207) 51%,
      rgb(215, 232, 207) 59%,
      rgb(235, 255, 212) 59%,
      rgb(235, 255, 212) 100%
    ),
    linear-gradient(
      135deg,
      rgb(95, 97, 179) 0%,
      rgb(95, 97, 179) 16%,
      rgb(115, 120, 184) 16%,
      rgb(115, 120, 184) 20%,
      rgb(135, 142, 188) 20%,
      rgb(135, 142, 188) 32%,
      rgb(155, 165, 193) 32%,
      rgb(155, 165, 193) 38%,
      rgb(175, 187, 198) 38%,
      rgb(175, 187, 198) 48%,
      rgb(195, 210, 203) 48%,
      rgb(195, 210, 203) 51%,
      rgb(215, 232, 207) 51%,
      rgb(215, 232, 207) 59%,
      rgb(235, 255, 212) 59%,
      rgb(235, 255, 212) 100%
    ),
    linear-gradient(
      112.5deg,
      rgb(95, 97, 179) 0%,
      rgb(95, 97, 179) 16%,
      rgb(115, 120, 184) 16%,
      rgb(115, 120, 184) 20%,
      rgb(135, 142, 188) 20%,
      rgb(135, 142, 188) 32%,
      rgb(155, 165, 193) 32%,
      rgb(155, 165, 193) 38%,
      rgb(175, 187, 198) 38%,
      rgb(175, 187, 198) 48%,
      rgb(195, 210, 203) 48%,
      rgb(195, 210, 203) 51%,
      rgb(215, 232, 207) 51%,
      rgb(215, 232, 207) 59%,
      rgb(235, 255, 212) 59%,
      rgb(235, 255, 212) 100%
    ),
    linear-gradient(90deg, rgb(236, 151, 145), rgb(201, 243, 43));
  background-blend-mode: overlay, overlay, overlay, normal;
}
.dark .angular-bloom-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100svh;
  background-image:
    linear-gradient(
      90deg,
      rgb(168, 86, 201) 0%,
      rgb(168, 86, 201) 3%,
      rgb(140, 74, 173) 3%,
      rgb(140, 74, 173) 11%,
      rgb(112, 61, 145) 11%,
      rgb(112, 61, 145) 20%,
      rgb(85, 49, 118) 20%,
      rgb(85, 49, 118) 49%,
      rgb(57, 37, 90) 49%,
      rgb(57, 37, 90) 71%,
      rgb(29, 24, 62) 71%,
      rgb(29, 24, 62) 72%,
      rgb(1, 12, 34) 72%,
      rgb(1, 12, 34) 100%
    ),
    linear-gradient(
      67.5deg,
      rgb(168, 86, 201) 0%,
      rgb(168, 86, 201) 3%,
      rgb(140, 74, 173) 3%,
      rgb(140, 74, 173) 11%,
      rgb(112, 61, 145) 11%,
      rgb(112, 61, 145) 20%,
      rgb(85, 49, 118) 20%,
      rgb(85, 49, 118) 49%,
      rgb(57, 37, 90) 49%,
      rgb(57, 37, 90) 71%,
      rgb(29, 24, 62) 71%,
      rgb(29, 24, 62) 72%,
      rgb(1, 12, 34) 72%,
      rgb(1, 12, 34) 100%
    ),
    linear-gradient(
      112.5deg,
      rgb(168, 86, 201) 0%,
      rgb(168, 86, 201) 3%,
      rgb(140, 74, 173) 3%,
      rgb(140, 74, 173) 11%,
      rgb(112, 61, 145) 11%,
      rgb(112, 61, 145) 20%,
      rgb(85, 49, 118) 20%,
      rgb(85, 49, 118) 49%,
      rgb(57, 37, 90) 49%,
      rgb(57, 37, 90) 71%,
      rgb(29, 24, 62) 71%,
      rgb(29, 24, 62) 72%,
      rgb(1, 12, 34) 72%,
      rgb(1, 12, 34) 100%
    ),
    linear-gradient(
      45deg,
      rgb(168, 86, 201) 0%,
      rgb(168, 86, 201) 3%,
      rgb(140, 74, 173) 3%,
      rgb(140, 74, 173) 11%,
      rgb(112, 61, 145) 11%,
      rgb(112, 61, 145) 20%,
      rgb(85, 49, 118) 20%,
      rgb(85, 49, 118) 49%,
      rgb(57, 37, 90) 49%,
      rgb(57, 37, 90) 71%,
      rgb(29, 24, 62) 71%,
      rgb(29, 24, 62) 72%,
      rgb(1, 12, 34) 72%,
      rgb(1, 12, 34) 100%
    ),
    linear-gradient(90deg, rgb(95, 3, 74), rgb(35, 65, 96));
  background-blend-mode: overlay, overlay, overlay, overlay, normal;
}

.tiles-pattern::after,
.radial-mono-pattern::after,
.angular-mono-pattern::after,
.angular-spring-pattern::after,
.angular-bloom-pattern::after,
.texture-sky-pattern::after,
.carbon-fibre-pattern::after,
.circle-mono-pattern::after,
.radial-midnight-pattern::after,
.radial-blue-pattern::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    to bottom,
    var(--background-kener-rgba) 0%,
    var(--background-kener) 100%
  );
}

.pets-pattern {
  position: fixed;

  left: -50px; /* Start offscreen */
  width: 50px;
  height: 50px;
  z-index: 100;
  background-repeat: no-repeat;
  background-size: 100%;

  animation: petWalking 45s linear infinite;
}

@keyframes petWalking {
  0% {
    left: -50px;
    transform: scaleX(1); /* Dog facing right */
  }
  45% {
    left: calc(100vw + 25px);
    transform: scaleX(1); /* Still facing right */
  }
  50% {
    left: calc(100vw + 50px);
    transform: scaleX(-1); /* Flip to face left */
  }
  95% {
    left: -25px;
    transform: scaleX(-1); /* Still facing left */
  }
  100% {
    left: -50px;
    transform: scaleX(1); /* Flip back to face right */
  }
}
